Role
Visual design
& design system
& design system
Visual design case study
•
2025
•
Confectionery e-commerce
Jelly Belly — a joyful, premium visual system for enterprise commerce
An iconic candy brand deserved a storefront as crafted as its flavours. This is the visual design story: the branding, the design system, and the UI craftsmanship behind a modern, scalable shopping experience that stays unmistakably playful.
jelly belly
ShopFlavoursGiftsMix Your OwnAbout
◎ ♡ ⛄
New · Signature Collection
Fifty flavours of pure joy, delivered.
Build your own mix, discover seasonal drops, and gift a little happiness — all in one beautifully simple place.
AllFruitSoursChocolateSeasonalSugar-freeGift sets
Very Cherry
$4.50
Tangerine
$4.50
Green Apple
$4.50
Blueberry
$4.50
Homepage — rendered from the final design system components
The brief
A brand everyone loves, an experience that hadn't kept up
Jelly Belly is one of the most recognisable candy brands in the world — joyful, colourful, and iconic. But its digital storefront had drifted: inconsistent components, a dated visual language, and marketing pages that didn't feel as premium as the product.
My remit was purely visual. Not the research or the roadmap — the craft. Rebuild the brand's on-screen identity, define a scalable design system, and design flagship screens premium enough for an enterprise storefront while keeping every pixel unmistakably playful.
What the visual work set out to do
Six goals framed every design decision — from the first mood board to the final component token.
01
Modernise the identity
Refresh the on-screen brand into something contemporary and premium without losing the joy that defines it.
02
Enforce consistency
One coherent visual language across storefront, marketing, and gifting — no more one-off screens.
03
Sharpen UI clarity
Calm layouts and clear hierarchy so a catalog of hundreds of flavours never feels overwhelming.
04
Build a scalable system
A tokenised component library the team can extend for years — not a static set of mockups.
05
Feel premium
Sophisticated whitespace, tactile depth, and considered motion that reads as a flagship experience.
06
Tell the product story
Put the candy front and centre — colour, texture, and flavour as the hero of every screen.
Mood board & direction
Where the visual language began: luxury packaging, macro candy photography, organic forms, and a joyful-but-premium personality. Hover to explore.
JoyfulCandy · macro colour
Organic formsSoft gradients · glass
Warm packaging
The hero: the bean
Playful gradients
PlayfulPremiumTactileWarmIconicCraftedOptimistic
Brand personalityFresh & natural
Cool contrast
Sunlit citrus
Three directions, one chosen
I explored three visual routes and pressure-tested each against the brand. Click a concept to select it.
Concept A
Playful
Maximal colour, bouncy shapes, sticker energy. All joy, less restraint.
Concept B
Premium
Editorial whitespace with candy colour as a disciplined accent. Joy, refined.
Concept C
Minimal
Quiet, gallery-like, one accent. Beautiful — but almost too restrained.
Why Premium won
B pairs a refined dark canvas and generous whitespace with candy colour used as a precise accent. It keeps the joy but earns the word “premium.” This is the chosen direction.
The colour system
A flavour-led palette: eight vivid candy hues at a shared chroma, grounded by warm neutrals and functional states. Click any swatch to copy its hex.
Copy hex
Very Cherry
#E8354A
Primary · CTAs, price, brand accent
Copy hex
Tangerine
#F5883B
Secondary · highlights, seasonal
Copy hex
Lemon Drop
#F5C518
Accent · badges, energy
Copy hex
Green Apple
#7FC241
Accent · fresh, natural cues
Copy hex
Blueberry
#3E6DE8
Accent · links, focus rings
Copy hex
Grape
#8A54D6
Accent · gifting, premium moments
Copy hex
Bubblegum
#F26FB0
Accent · playful, editorial
Copy hex
Cream Surface
#FBF3E4
Surface · cards, panels
Copy hex
Cocoa Ink
#2A1B1F
Text · headings & body on light
Copy hex
Success
#2FA36B
State · confirmations, in-stock
Copy hex
Warning
#E8A33D
State · low stock, caution
Copy hex
Error
#D93636
State · validation, failures
AA contrast verified on all text pairings
Chroma-matched hues for harmony
Neutrals warmed toward cream, never cold grey
Type system
One warm geometric family carries the whole brand — rounded enough to feel friendly, structured enough to feel premium. A clear scale from display to label.
H1 / Display800 · -2%
clamp 58
clamp 58
Pure joy, delivered
H2 / Title800 · -2%
40px
40px
Fifty iconic flavours
H3 / Section700 · -1%
28px
28px
Build your own mix
Body400 · 1.6
18px
18px
Every bean is packed with true-to-life flavour, crafted in small batches and photographed in glorious macro detail.
Caption500
13px
13px
Net wt. 3.5 oz · 40 flavours per bag
Label600 · .14em
12px caps
12px caps
New this season
Component library
A tokenised UI kit — every element ships with default, hover, focus, and state variants. A live sample of the system below.
Buttons · variants & sizes
Form fields · states
Please enter a valid email address
Code applied — 25% off
Badges & chips
SaleNewGift setSeasonal
AllFruitSoursSugar-free
Toast messages
✓ Added Very Cherry to your bag
! That flavour just sold out
Product cards · the workhorse component
Sale
Very Cherry
Bold · true-to-fruit
$4.50
New
Island Grape
Sweet · juicy
$4.50
Gift
Sunset Mix
Citrus medley
$12.00
The system, assembled
Flagship screens built entirely from the tokens and components above — storefront on desktop, product detail on mobile.
jelly belly
ShopFlavoursGiftsMix
◎ ♡ ⛄
Seasonal drop
Taste the rainbow, reimagined.
Small-batch flavours, big-batch joy. Free shipping over $35.
Very Cherry
$4.50
Tangerine
$4.50
Grape
$4.50
Apple
$4.50
←Product♡
★★★★★ 4.9 · 2,140 reviews
Very Cherry
$4.50
0
Reusable components
& variants shipped
& variants shipped
1
Unified system across
web & marketing
web & marketing
0
Faster design-to-dev
handoff with tokens
handoff with tokens
0
AA contrast across
the core palette
the core palette
Design principle
Keep the joy — but make it feel like a flagship.
The single line that settled every visual decision on the project